<template>
	<view>
		<uni-nav-bar  statusBar @clickRight="handleNavigateToPublish" fixed :border='false'>
				<view class="nav-left" slot='left'>
					<view class="icon iconfont icon-qiandao"></view>
				</view>
				<view class="nav-tab-bar u-f-ajc">
					<block v-for="(item, index) in tabbars" :key='item.id'>
						<view :class="{'active':index==tabIndex }" @tap='handleTapTabItem(index)'>{{item.name}}<view class="nav-tab-bar-line"></view></view>
					</block>
					
				</view>
				<view class="nav-right u-f-ajc" slot='right'>
					<view class="icon iconfont icon-bianji1"></view>
				</view>
		</uni-nav-bar>
	</view>
</template>

<script>
	import UniNavBar from '../uni-nav-bar/uni-nav-bar.vue'
	export default {
		components:{
			UniNavBar
		},
		props:{
			tabbars: Array,
			tabIndex: Number
		},
		methods:{
			// 点击头部标题
			handleTapTabItem(index) {
				this.$emit('tab-click', index)
			},
			//// 点击头部笔跳转发布页面
			handleNavigateToPublish() {
				this.$emit('publish-click')
			}
		}
	}
</script>

<style scoped>
	.nav-left>view,.nav-right>view {
		font-size: 40upx;
	}
	.nav-left {
		margin-left: 25upx;
	}
	
	.nav-right {
		width: 100%;
	}
	.nav-left> view {
		color: #FF9619;
	}
	
	.nav-tab-bar {
		width: 100%;
		margin-left: -20rpx;
	}
	
	.nav-tab-bar >view {
		font-size: 32upx;
		font-weight: 700;
		color: #969696;
		padding: 0 15upx;
		position: relative;
	}
	
	.nav-tab-bar .active {
		color: #333;
	}
	
	.nav-tab-bar .active .nav-tab-bar-line {
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0upx;
		margin: 0 auto;
		border-bottom: 5upx solid #FEDE33;
		border-top: 5upx solid #FEDE33;
		width: 70upx;
		border-radius: 20upx;
	}
</style>
